<template>
  <PermissionContainer
    :jiBieArr="[1]"
    :isFlag="true"
    :tipArr="[, '平台设价只对集团级别开放', '', , '']"
  >
    <div
      class="accordion"
      :id="'accordionExample' + index"
      v-for="(ele, index) in list"
      :key="index"
    >
      <div class="card m-auto" style="width: 500px">
        <div class="card-header" :id="'headingOne' + index">
          <h2 class="mb-0">
            <button
              class="btn btn-link btn-block text-left"
              type="button"
              data-toggle="collapse"
              :data-target="'#collapseOne' + index"
              aria-expanded="true"
              :aria-controls="'collapseOne' + index"
            >
              {{ ele.stationName }}
            </button>
          </h2>
        </div>

        <div
          :id="'collapseOne' + index"
          class="collapse"
          :aria-labelledby="'headingOne' + index"
          :data-parent="'#accordionExample' + index"
        >
          <div class="card-body">
            <el-form
              :model="ele"
              status-icon
              :ref="'listForm' + index"
              label-width="120px"
              class="demo-ruleForm w-75 m-auto"
            >
              <el-form-item label="结算优惠类型" prop="settlementType">
                <el-radio-group
                  v-model="ele.settlementType"
                  :disabled="!ele.editFlag"
                >
                  <el-radio label="1">直降</el-radio>
                  <el-radio label="2">折扣</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="结算优惠金额" prop="settlementPrice">
                {{ ele.settlementType == 1 ? "直降" : "折扣" }}
                <input
                  type="text"
                  class="form-control form-control-sm d-inline-block"
                  style="width: 80px"
                  v-model.number="ele.settlementPrice"
                  :disabled="!ele.editFlag"
                />
                {{ ele.settlementType == 1 ? "元" : "%" }}
              </el-form-item>
              <el-form-item label="司机优惠类型" prop="settlementType">
                <el-radio-group
                  v-model="ele.driverPriceType"
                  :disabled="!ele.editFlag"
                >
                  <el-radio label="1">直降</el-radio>
                  <el-radio label="2">折扣</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="司机优惠折扣" prop="driverPrice">
                {{ ele.driverPriceType == 1 ? "直降" : "折扣" }}
                <input
                  type="text"
                  class="form-control form-control-sm d-inline-block"
                  style="width: 80px"
                  v-model.number="ele.driverPrice"
                  :disabled="!ele.editFlag"
                />
                {{ ele.driverPriceType == 1 ? "元" : "%" }}
              </el-form-item>
              <el-form-item label="站点交易余额" prop="balance">
                {{ ele.balance === null ? 0 : ele.balance }}
                <a href="#" class="mb-2 ml-2" @click="toggleBalanceFlag(ele)"
                  >{{ !ele.balanceFlag ? "调整" : "收起" }}
                </a>
                <div class="mt-2" v-show="!!ele.balanceFlag">
                  <select
                    class="custom-select custom-select-sm mb-1 mr-1"
                    :id="'inputGroupSelect' + index"
                    style="width: 50px"
                    :disabled="!ele.balanceFlag"
                    v-model.number="ele.type"
                  >
                    <option value="+">+</option>
                    <option value="-">-</option>
                  </select>
                  <input
                    type="text"
                    class="form-control form-control-sm d-inline-block"
                    style="width: 80px"
                    :disabled="!ele.balanceFlag"
                    v-model.number="ele.amt"
                  />

                  <el-button
                    class="btn btn-outline-dark btn-sm mb-1 ml-1"
                    :disabled="!ele.balanceFlag"
                    @click="changeBalance(ele, index)"
                  >
                    确认
                  </el-button>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm(ele, index)"
                  class="mr-2"
                  :disabled="!ele.editFlag"
                  >提交</el-button
                >
                <el-button @click="toggleEditFlag(ele, index)">{{
                  !ele.editFlag ? "修改" : "取消"
                }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </PermissionContainer>
</template>

<script>
import { getLngList, getLngSingle, updateInfo, balanceChange } from "@/api/lng";

export default {
  name: "Lng_GroupSet",
  data() {
    return {
      list: [
        {
          settlementType: "1",
          settlementPrice: 1,
          driverPrice: 97,
          balance: 1000,
        },
        {
          settlementType: "1",
          settlementPrice: 2,
          driverPrice: 95,
          balance: 2000,
        },
      ],
    };
  },
  created() {
    this.getLngList();
  },
  methods: {
    getLngSingle(id, index) {
      return getLngSingle(id)
        .then((res) => {
          if (res.code == 200) {
            this.list[index] = res.data;
            this.list = [...this.list];
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("拉取气站列表失败");
        });
    },
    getLngList() {
      getLngList()
        .then((res) => {
          if (res.code == 200) {
            this.list = res.rows;
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("拉取气站列表失败");
        });
    },
    toggleBalanceFlag(ele) {
      ele.type = "+";
      ele.balanceFlag = !ele.balanceFlag;
      ele.editFlag = false;
      this.list = [...this.list];
    },
    toggleEditFlag(ele, index) {
      ele.editFlag = !ele.editFlag;
      ele.balanceFlag = false;
      if (!ele.editFlag) {
        this.getLngSingle(ele.id, index);
      } else {
        this.list = [...this.list];
      }
    },
    submitForm(ele, index) {
      updateInfo(ele)
        .then((res) => {
          if (res.code == 200) {
            this.getLngSingle(ele.id, index).then((res) => {
              this.editFlag = false;
            });
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("修改失败，请刷新后重试");
        });
    },
    changeBalance(ele, index) {
      if (!ele.type || !ele.amt || !ele.deptId || ele.amt <= 0) {
        this.msgError("请正确填写参数");
        return;
      }
      balanceChange({
        type: ele.type,
        amt: ele.amt,
        stationId: ele.deptId,
      })
        .then((res) => {
          if (res.code == 200) {
            this.getLngSingle(ele.id, index).then((res) => {
              ele.type = "+";
              ele.amt = 0;
              ele.balanceFlag = false;
            });
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("修改失败，请刷新后重试");
        });
    },
  },
};
</script>

<style>
</style>